﻿<!doctype html>
<html class="no-js" lang="en" xmlns:th="https://www.thymeleaf.org/"
	  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	  layout:decorate="~{layout}">
<head>
</head>
<body>
	<div class="wrapper" layout:fragment="content">
		<div class="breadcrumb-area">
		    <div class="container">
		        <div class="row">
		            <div class="col-12">
		                <div class="breadcrumb-content text-center">
                            <h1 class="breadmome-name">我的订单</h1>
		                    <ul>
		                        <li><a href="/">返回首页</a></li>
		                        <li class="active">我的订单</li>
		                    </ul>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		<!--Breadcrumb Area End-->
	    <!--Wishlist Area Strat-->
		<div class="wishlist-area mt-80">
		    <div class="container">
		        <div class="row">
		            <div class="col-12">
		                <form action="#">
		                    <div class="table-content table-responsive">
		                        <table class="table">
		                            <thead>
		                                <tr>
		                                    <th class="picaboo-product-thumbnail">商品图片</th>
		                                    <th class="cart-product-name">商品名称</th>
		                                    <th class="picaboo-product-price">订单金额</th>
											<th class="picaboo-product-add-cart">收货地址</th>
		                                    <th class="picaboo-product-stock-status">订单状态</th>
											<th class="picaboo-product-remove">订单操作</th>
		                                </tr>
		                            </thead>
		                            <tbody>
		                                <tr th:each="addr:${order}" th:if="${addr.orderState!='已归档'}">
		                                    <td class="picaboo-product-thumbnail"><a th:href="@{/info(commodityNumber=${addr.commodityNumber})}"><img style="height: 100px;width: 100px;" th:src="@{${addr.commodityImg}}"></a></td>
		                                    <td class="picaboo-product-name"><a th:href="@{/info(commodityNumber=${addr.commodityNumber})}"th:text="${addr.commodityName}">商品名称</a></td>
		                                    <td class="picaboo-product-price"><span class="amount" th:text="'￥'+${addr.orderPrice}">$23.39</span></td>
											<td class="picaboo-product-add-cart" th:text="${addr.address}">收货地址</td>
											<td class="picaboo-product-stock-status"><span class="in-stock" th:text="${addr.orderState}">状态<</span></td>
											<td class="picaboo-product-stock-status" th:switch="${addr.orderState}">
												<span class="picaboo-product" th:case="待发货">
													<a class="order" href="javascript:;" th:data-number="${addr.orderId}" data-name="取消订单">取消订单</a>
												</span>
												<span class="picaboo-product" th:case="已发货">
													<a class="order" href="javascript:;" th:data-number="${addr.orderId}" data-name="取消订单">取消订单</a>
												</span>
												<span class="picaboo-product" th:case="已送达">
													<a class="order" href="javascript:;" th:data-number="${addr.orderId}" data-name="取消订单">取消订单</a>
													<a class="order" href="javascript:;" th:data-number="${addr.orderId}" data-name="确认签收">确认签收</a>
												</span>
												<span class="picaboo-product" th:case="订单完成">
													<a class="order" href="javascript:;" th:data-number="${addr.orderId}" data-name="申请退货">申请退货</a>
												</span>
												<span class="picaboo-product" th:case="申请取消订单">
													订单取消中...
												</span>
												<span class="picaboo-product" th:case="订单已取消">
													<a class="order" href="javascript:;" th:data-number="${addr.orderId}" data-name="删除订单">删除订单</a>
												</span>
												<span class="picaboo-product" th:case="已退货">
													<a class="order" href="javascript:;" th:data-number="${addr.orderId}" data-name="删除订单">删除订单</a>
												</span>
												<span class="picaboo-product" th:case="申请退货">
													退货处理中...
												</span>
												<span class="picaboo-product" th:case="未付款">
													<a th:href="@{orderall(orderNo=${addr.orderNumber})}" data-name="付款">付款</a>
												</span>
											</td>
		                                </tr>
		                            </tbody>
		                        </table>
		                    </div>
		                </form>
		            </div>
		        </div>
		    </div>
		</div>
	</div>

	<script layout:fragment="script">
		$(function () {
			$(".order").click(function () {
				var s=$(this).attr('data-name');
				var n=$(this).attr('data-number');
				$.ajax('orders',{
					type:'post',
					dateType:'json',
					data:{
						"order":s,
						"orderId":n
					},
					error : function(xhr, e) {
						alert("请求失败请刷新后重试")
					}
				}
				)
				if(s==="取消订单"){
					$(this).parent().parent().prev().children("span:first").text("申请取消订单");
					$(this).parent().html("订单取消中...");
				}
				if(s==="申请退货"){
					$(this).parent().parent().prev().children("span:first").text("申请退货");
					$(this).parent().html("退货处理中...");
				}
				if(s==="确认签收"){
					$(this).prev().remove();
					$(this).parent().parent().prev().children("span:first").text("订单完成");
					$(this).html("申请退货");
				}
				if(s==="删除订单"){
					$(this).parent().parent().parent().remove();
				}
			});
		})
	</script>

</body>
</html>
